<template>
  <div class="condittion">
    <header>
      <h1>默认值脚本</h1>
      <div class="header-info">
        <a-checkbox v-model="info.isExecute"> 是否动态 </a-checkbox>
        <!-- 默认值脚本绑定数据源 Start -->
        <div class="Data">
          <span>绑定数据源 : </span><a-select size="small" style="width: 80%" @change="dataSourceOnChange"
            v-model="DataSourceID" :disabled="!info.isExecute">
            <a-select-option v-for="item in dataSourceList" :key="item.DataSourceID">
              {{ item.DataSourceName }}
            </a-select-option>
          </a-select>
        </div>
        <!-- 默认值脚本绑定数据源 End -->
        <span class="add"><a-icon type="plus-circle" @click="addDefault" /></span>
      </div>
    </header>
    <div>
      <!-- 默认值脚本表头 Start -->
      <a-row type="flex" justify="center" :gutter="[16, 0]" style="margin-bottom: 0.9375rem">
        <a-col v-for="(item, index) in singLetonTitleList" :key="index" class="flex-justify-center" :span="item.span">
          {{ item.name }}
        </a-col>
      </a-row>
      <!-- 默认值脚本表头 End -->
      <!-- 默认值脚本内容 Start -->
      <div class="list-box">
        <a-row class="row-class" type="flex" justify="center" :gutter="[16, 0]"
          v-for="(ditem, dindex) in info.defaultValueList" :key="dindex">
          <a-col class="flex-justify-center" :span="2" :order="1">
            {{ dindex + 1 }}
          </a-col>
          <a-col class="flex-justify-center" :span="5" :order="2">
            <a-select size="small" style="width: 100%" v-model="ditem.DataFieldType" :disabled="!info.isExecute">
              <a-select-option v-for="fieldTypeItem in fieldTypeList" :key="fieldTypeItem.type">
                {{ fieldTypeItem.name }}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col class="flex-justify-center" :span="5" :order="3">
            <a-select size="small" style="width: 100%" v-model="ditem.DataFieldID" :disabled="!info.isExecute"
              @change="value => dataFieldOnChange(value, dindex)">
              <a-select-option v-for="item in dataFieldList" :key="item.DataFieldID">
                {{ item.DataFieldName }}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col class="flex-justify-center" :span="9" :order="5">
            <a-input size="small" v-model="ditem.DictionaryName" :disabled="!info.isExecute" />
          </a-col>
          <a-col class="flex-justify-center" :span="2" :order="12">
            <a-icon type="close" class="cursor-pointer" @click="delterm(ditem, dindex)" />
          </a-col>
        </a-row>
      </div>
      <!-- 默认值脚本内容 End -->
    </div>
  </div>
</template>
     
<script>
import { getDataFields } from "@/api/DataField";
import { getDataSources } from "@/api/DataSource"; //数据来源
import { deleteJobFieldDataScript } from "@/api/JobFieldDataScript"; //结果脚本和默认值脚本
export default {
  props: ["info"],
  data() {
    return {
      DataSourceID: null, //当前ID
      DataFieldInfo: {},//默认第一个参数
      fieldTypeList: [
        {
          name: "传入",
          type: 10,
        },
        {
          name: "输出",
          type: 11,
        },
      ], //字段类型
      dataSourceList: [], //数据源列表
      dataSourceInfo: {}, //数据源信息
      dataFieldList: [], //字段名称
      singLetonTitleList: [
        { name: "序号", span: 2 },
        { name: "字段类型", span: 5 },
        { name: "字段名称", span: 5 },
        { name: "字典名称", span: 9 },
        { name: "操作", span: 2 },
      ], //项表头
    };
  },
  methods: {
    //查询字段名称
    async getDataFieldsFun(type) {
      let res = await getDataFields({
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 100,
        },
        DataSourceID: this.DataSourceID,
      });

      this.dataFieldList = res.Data.Data;
      this.DataFieldInfo = res.Data.Data[0];
      if (type == 2) {

        this.info.defaultValueList.map((ditem) => {
          ditem.DataFieldID = this.DataFieldInfo.DataFieldID;
        });
      } else {

        this.info.defaultValueList.map((ditem) => {
          if (!ditem.JScriptID)
            ditem.DataFieldID = this.DataFieldInfo.DataFieldID;
        });
      }

    },
    //选中数据源
    dataSourceOnChange(value, option) {
      this.dataSourceInfo = this.dataSourceList.find(
        (item) => item.DataSourceID == value
      );
      this.DataSourceID = this.dataSourceList.find(
        (item) => item.DataSourceID == value
      ).DataSourceID;
      let { DataFieldName, DataSourceID } = this.dataSourceInfo;
      this.getDataFieldsFun(2);
      this.info.defaultValueList.map((ditem) => {
        ditem.DataSourceID = DataSourceID;
        ditem.DataFieldName = DataFieldName;
        ditem.DataFieldID = this.DataFieldInfo.DataFieldID;
      });
    },

    /* 选中字段赋值字典 */
    dataFieldOnChange(value, option) {
      let obj = this.dataFieldList.find(item => item.DataFieldID == value)
      this.info.defaultValueList[option].DictionaryName = obj.DataFieldName
    },
    //新增默认值项
    addDefault() {
      console.log(this.DataFieldInfo)
      if (!this.info.isExecute)
        return this.$message.error("请先勾选是否动态项再操作");
      let { DataFieldName, DataSourceID } = this.dataSourceInfo;
      let { type } = this.fieldTypeList[0];
      this.info.defaultValueList.push({
        DataSourceID, //数据源标识
        DataFieldID: this.DataFieldInfo.DataFieldID, //字段名称id
        DataFieldType: type, //字段类型id
        DictionaryName: this.DataFieldInfo.DataFieldName //字段名称
      });
    },
    //删除项
    delterm(item, index) {
      if (!this.info.isExecute)
        return this.$message.error("请先勾选是否动态项再操作");
      let that = this;
      this.$confirm({
        title: "提示",
        content: `是否删除序号【${index + 1}】`,
        async onOk() {
          if (item.JScriptID) {
            let res = await deleteJobFieldDataScript(item);
            res.Success
              ? that.$message.success("删除成功")
              : that.$message.error(res.Message);
            that.info.defaultValueList.splice(index, 1);
          } else {
            that.info.defaultValueList.splice(index, 1);
          }
        },
        onCancel() { },
      });
    },
    //获取数据源
    async getDataSourcesFun() {
      let res = await getDataSources({
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 1000,
        },
      });
      if (res.Status == 10000) {
        this.dataSourceList = res.Data.Data;
        if (this.info.defaultValueList.length > 0) {
          this.DataSourceID = this.dataSourceList.find(
            (item) =>
              item.DataSourceID == this.info.defaultValueList[0].DataSourceID
          ).DataSourceID;
          this.dataSourceInfo = this.dataSourceList.find(
            (item) =>
              item.DataSourceID == this.info.defaultValueList[0].DataSourceID
          );
        } else {
          this.DataSourceID = this.dataSourceList[0].DataSourceID;
          this.dataSourceInfo = this.dataSourceList[0];
        }
        this.getDataFieldsFun(1);
      }
    },
  },
  mounted() {
    this.getDataSourcesFun();
  },
};
</script>
     
<style lang = "less" scoped>
header {
  margin: 0.9375rem;

  .header-info {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .Data {
      flex: 1;
      margin: 0 1.25rem;
      display: flex;
      align-items: center;
    }

    .add {
      flex: 2;
    }
  }
}

.row-class {
  margin-bottom: 0.9375rem;
}

.list-box {
  height: 35rem;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>